{% extends "../single_page.html" %}

{% block title %}
<title>高级功能 订制上传</title>
{% endblock %}

{% block header_title %}
<h1>订制上传</h1>
{% endblock %}

{% block header_ol %}
	<li class="breadcrumb-item"><a href="/Home/">Home</a></li>
	<li class="breadcrumb-item">ADVANCE</li>
	<li class="breadcrumb-item active">AdvanceUpload</li>
{% endblock %}

{% block card-body %}
<form id="uploadForm" role="form">
    <div class="form-group">
        <label for="uploadUrl" class="text-primary"> 上传文件类型</label>
        <select class="form-control SearchModelName" id="uploadUrl" name="uploadUrl">
            <option value="MethyCaptureInfoPlus">订制捕获文库信息表</option>
            <option value="0"></option>
        </select>
    </div>
    <div>
        <p class="text-info">上传文件的表格标题如下：</p>
        <table id="uploadFile1Col" class="table table-bordered">
            <tr id="customFields">

            </tr>
        </table>
    </div>
    <div class="form-group">
        <label for="uploadFile" class="text-primary"> 上传文件</label>
        <input type="file" class="form-control" id="uploadFile" name="uploadFile"
               placeholder="请上传文件" required="true">
    </div>
    <button type="button" class="btn btn-info" style="margin: 0 10px"
            id="downloadExcel1">上传文件模板下载
    </button>
    <button type="submit" class="btn btn-success" style="margin: 0 10px"
            id="uploadFile1Submit">文件上传
    </button>
    <button type="button" class="btn btn-warning" id="uploadReset">重置</button>
    <br><br>
    <dl>
        <dt class="text-primary front-weight-bold">上传结果信息：</dt>
        <dd id="uploadInfo" class="text-primary" style="white-space: pre-line"></dd>
        <dt class="text-danger front-weight-bold">报错信息：</dt>
        <dd id="uploadError" class="text-danger front-weight-bold" style="white-space: pre-line"></dd>
    </dl>
</form>
{% endblock %}

{% block modal_html %}

{% endblock %}

{% block modal_js %}

{% endblock %}

<!-- page script -->
{% block page-script %}
<script>
	$(document).ready(function () {
		$("#sidebar_ADVANCE>a").addClass("active");
        $("#sidebar_ADVANCE").addClass("menu-open");
        $("#sidebar_ADVANCE>ul>li:eq(1)>a").addClass("active");
        $(".sidebar").removeAttr("hidden");

	    function set_customFields() {
            let v_tmp = $("#uploadUrl").val();
            let html_txt = "";
            if (v_tmp === "MethyCaptureInfoPlus") {
                html_txt = "<th>建库编号</th><th>pooling比例</th><th>取样(ng)</th><th>体积(ul)</th><th>捕获文库名</th>" +
                    "<th>杂交日期</th><th>杂交探针</th><th>杂交时间(min)</th><th>PostPCR循环数</th>" +
                    "<th>PostPCR浓度(ng/ul)</th><th>洗脱体积(ul)</th><th>操作人</th><th>上机文库号</th><th>测序文库名</th>\n" +
                    "<th>备注</th>";
            }
            $("#customFields").empty();
            $("#customFields").append(html_txt);
        }

        $("#uploadUrl").find("option[value='MethyCaptureInfoPlus']").attr("selected", true);
        set_customFields();

        $("#uploadUrl").on("change", function () {
            set_customFields();
        })

        $('#uploadFile1Submit').on('click', function (e) {
            e.preventDefault();
            if ($("#uploadUrl").val() === '0') {
                $('#uploadError').text("操作失败！！！上传文件类型不能为空");
            } else if ($("#uploadFile").val() === "" || $('#uploadFile').val() === undefined || $('#uploadFile').val() === null) {
                $('#uploadError').text("操作失败！！！上传文件不能为空");
            } else {
                // 构建FormData对象
                let form_data = new FormData();
                form_data.append('uploadFile', $('#uploadFile')[0].files[0]);
                form_data.append('uploadUrl', $('#uploadUrl').val());
                form_data.append('uploadOperator', "{{ user.username }}");
                let urlUpload = "{% url 'ADVANCE:upload' %}";

                $.ajax({
                    async: false, url: urlUpload, processData: false,
                    method: 'POST', data: form_data, dataType: 'json',
                    contentType: false,
                    success: function (data) {
                        if (data.error_msg_fatal) {
                            // alert('文件上传和批量添加失败。' + data['error_msg']);
                            $('#uploadInfo').text("");
                            $('#uploadError').text(data.error_msg_fatal);
                        } else {
                            let update_records = parseInt(data.all_records) - parseInt(data.add_records);
                            /* alert('文件上传和批量添加成功，有效输入记录共有' + data.all_records +
                                "行。\n其中往数据库中增加" + data.add_records + '行记录，更新了' +
                               update_records + '行记录。'); */
                            $('#uploadInfo').text('文件上传和批量添加成功，输入记录共有' + data.all_records +
                                '行，有效的共有' + data.valid_records + "行。\n其中往数据库中增加" +
                                data.add_records + '行记录，更新了' + update_records + '行记录。' + data.warning);
                            $('#uploadError').text(data.error_msg_tolerant);
                            /* $("#uploadModal").find('form').trigger("reset");
                            $('#uploadModal').modal('hide');
                            location.reload(); */
                        }
                    }
                });
            }
        });

        $('.downloadExcel1').on('click', function (e) {
            e.preventDefault();
            window.location.href = '/ADVANCE/download_excel/ADVANCE_' + $('#uploadUrl').val() + '/'
        });

        $('#uploadReset').on('click', function (e) {
            e.preventDefault();
            $("#uploadForm").trigger("reset");
            $('#uploadInfo').text("");
            $('#uploadError').text("");
        });

    });
</script>
{% endblock %}
